// JSX - 样式处理
// 俩种方式: 1.内联  2.类名[推荐]

// 内联样式控制
// 语法: style={ {color:'red', fontSize:'16px'} }
// 注意事项: 1.驼峰形式写属性  2.多个样式逗号分割  3.如果控制的样式很多 抽象成一个变量

// 类名样式控制
// 实现步骤: 1.定义一个额外的css文件 然后在当前的组件中引入 2. 通过一个专有的属性 className='类名'
// 多个类名的控制: className="test active"
// 实际开发中应该如何控制呢? classnames
import './app.css'
const style = {
  color: 'red',
  fontSize: '30px'
}

function App () {
  return (
    <div className="App">
      <div style={style}> this id div</div>
      <div className='test active'>this is test</div>
    </div>
  )
}


export default App
